import React, { useEffect } from "react";
import { View, Image } from "@tarojs/components";

import "./index.less";

export default (props) => {
  const toothClick = (current) => {
    const flag = props.type + current;
    const flagIndex = props.actives.indexOf(flag);
    if (flagIndex > -1) {
      props.actives.splice(flagIndex, 1);
    } else {
      props.actives.push(flag);
    }
    props.setActives([...props.actives]);
  };
  return (
    <View
      className={"selectToothPart " + props.type}
      style={{ height: props.isChild && "360rpx" }}
    >
      {new Array(props.isChild ? 5 : 8).fill("").map((item, index) => {
        const current = index + 1;
        const isActive = props.actives.indexOf(props.type + current) > -1;
        const currentImg = require(`@assets/select-tooth/tooth/${
          isActive ? current + "active" : current
        }.png`);
        return (
          <View
            className={["tooth", isActive ? "toothActive" : null]}
            onClick={() => {
              toothClick(current);
            }}
          >
            <View className="wrapp">
              <image mode="widthFix" src={currentImg} />
              <View className="font">{current}</View>
            </View>
          </View>
        );
      })}
    </View>
  );
};
